<template>
  <div>
    <el-button 
      type="primary" plain
      @click="dialogFormVisible = true">新增放映厅</el-button>
    <el-divider></el-divider>
    <!-- 放映厅列表 -->
    <el-table :data="rooms">
      <el-table-column label="放映厅名称" prop="room_name">
      </el-table-column>
      <el-table-column label="放映厅类型" prop="room_type">
      </el-table-column>
      <el-table-column label="座位数量">
        <template slot-scope="scope">
          {{scope.row.room_size?scope.row.room_size:'暂未配置座位模板'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button 
            @click="$router.push(
              `/home/showingonplan-add/${scope.row.id}`)"
            size="small" type="primary" 
            icon="el-icon-plus" circle>
          </el-button>
          <el-button 
            @click="$router.push(
              `/home/showingonplan-list/${scope.row.id}`)"
            size="small" type="success" 
            icon="el-icon-date" circle>
          </el-button>
          <el-button 
            @click="$router.push(
              `/home/seat-template/${scope.row.id}`)"
            size="small" type="success" 
            icon="el-icon-menu" circle>
          </el-button>
          <el-button 
            size="small" type="danger" 
            icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
      
    </el-table>

    <!-- 放置一个自定义对话框 提供添加放映厅的表单 -->
    <el-dialog 
      title="新增放映厅"
      :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="放映厅名称">
          <el-input v-model="form.room_name"></el-input>
        </el-form-item>
        <el-form-item label="放映厅类型">
          <el-select 
            style="width: 100%;"
            v-model="form.room_type" placeholder="请选择类型">
            <el-option 
              v-for="item in types" :key="item.id"
              :label="item.type_name" 
              :value="item.type_name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">
          确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      rooms: [],  // 保存放映厅列表
      types: [],  // 保存所有的放映厅的类型
      dialogFormVisible: false, // 控制是否显示对话框
      form: {
        // 上一个页面（影院列表页）点击影院后传过来的影院id
        movie_cinema_id: this.$route.params.cinema_id,
        room_name: '',   // 放映厅的名称
        room_type: ''    // 放映厅的类型
      }
    }
  },

  methods: {
    // 提交添加放映厅的请求
    submit() {
      // 完成表单的验证 重要：需要整理好请求参数
      // room_name room_type  movie_cinema_id
      console.log(this.form)
      this.$http.cinemaRoomApi.add(this.form).then(res=>{
        console.log('新增放映厅的结果', res)
        if(res.data.code==200){
          // 新增放映厅完成
          this.$message({
            type:'success',
            message:'新增放映厅完成'
          })
          // 重置表单
          this.form.room_name = ''
          this.form.room_type = ''
          // 隐藏弹出窗口
          this.dialogFormVisible = false
          // 刷新当前列表
          this.loadRooms()
        }
      })
    },
    loadRooms(){
      // let params = {cinema_id: this.form.movie_cinema_id}
      let params = {cinema_id: this.$route.params.cinema_id}
      this.$http.cinemaRoomApi.list(params).then(res=>{
        console.log('加载当前电影院的放映厅', res)
        this.rooms = res.data.data
      })
    }
  },

  /** 页面挂载完毕后执行 */
  mounted(){
    // 加载当前电影院的放映厅列表
    this.loadRooms()

    // 加载所有放映厅的类型
    this.$http.cinemaRoomApi.queryAllTypes().then(res=>{
      console.log('加载所有放映厅类型', res)
      this.types = res.data.data
    })
  }
};
</script>

<style lang="scss" scoped>
</style>